Oefening HTML bevragingsformulier

Enkele tips om een basis html formulier te maken

Probleem

We hebben een eenvoudig enquêteformulier nodig.

Design

De elementen staan gerangschikt in de volgorde waarop ze op het formulier moeten komen te staan.

bijbehorend label

type

name attribuut

id attribuut

value attribuut

placeholder

required

autofocus

Naam

tekstvak

name

in te typen

E-mail

email tekstvak

in te typen

user@provider.domain

nee

Website

url tekstvak

urlwebsite

in te typen

www.provider.domain

nee

Commentaar

texterea

comment

in te typen

nee

Hoe ben je op deze site gekomen?

Toevallig
Vriend
Zoekmachiene

radio

refer
refer
refer

refer-random
refer-friend
refer-search-engine

random
friend
refer-search-engine

nee

Wat vind je van deze website?

rate

rating

-5 tot 5

ja
required werkt
niet bij het

nee

Interesses:

programmeren
filosofie
koken

checkbox

interest

interest-pro
interest-phi
interest-cook

pro
phi
cook

nee

Land

uitklapbare
keuzelijst

country

Opties:

value	tekst
BE	België
DE	Duitsland
FR	Frankrijk
LU	Luxemburg
NL	Nederland
UK	Verenigd Koninkrijk

nee

Oplossing

Video 1 Algemeen

Video 2 get en post

Video 3 get en post in Chrome en Edge

Code

We plaatsen de html elementen de een na de ander in het formulier en voegen de attributen, die in de design zijn opgenoemd, toe.
Maak een bestand met de naam enquete.html in de map labo6. Informatie over form elementen vind je hier.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="enqueteformulier">
    <meta name="keywords" content="form, enquête, bevarging, Graduaat Informatica, AP">
    <meta name="author" content="Jef Inghelbrecht">
    <meta name="date" content="20190501">
    <meta name="time" content="22:20:00">
    <title>Enquête formulier</title>
</head>
<body>
    <h1>Bevraging</h1>
    <p><span class="error">* verplicht veld</span></p>
    <form method="post" action="#">
        <fieldset>
            <div>
                <label for="name">Naam</label>
                <input type="text" name="name" id="name" autofocus required>
                <span>*</span>
            </div>
            <div>
                <label for="email">E-mail</label>
                <input type="email" name="email" id="email" required placeholder="user@provider.name">
                <span>*</span>
            </div>
            <div>
                <label for="website">Website</label>
                <input type="url" name="urlwebsite" id="urlwebsite" placeholder="www.provider.name">
            </div>
            <div>
                <label for="comment">Commentaar</label><br>
                <textarea name="comment" id="comment" rows="5" cols="40"></textarea>
            </div>
            <div>
                <label>Hoe ben je op onze site terechtgekomen?</label>
                <span>*</span><br>
                <input name="refer" type="radio" id="refer-random" value="random" required />
                <label for="refer">Toevallig</label>
            </div>
            <div>
                <input name="refer" type="radio" id="refer-friend" value="friend" required />
                <label for="refer-friend">Vriend</label>
            </div>
            <div>
                <input name="refer" type="radio" id="refer-search-engine" value="search-engine" required />
                <label for="refer-search-engine">Zoekmachine</label>
            </div>
            <div>
                <label for="satisfied">Hoe tevreden ben je?<br>(tussen 0 en 10)</label><br>
                <input type="range" min="-5" max="5" step="1" value="0" name="satisfied" id="satisfied" required />
            </div>
            <div>
                <label for="rating">Je interesses?</label><br>
                <input type="checkbox" name="interest" id="interest-pro" value="pro" />
                <label for="rate-5">Programmeren</label>
            </div>
            <div>
                <input type="checkbox" name="interest" id="interest-phi" value="phi">
                <label for="rate-4">Filosofie</label>
            </div>
            <div>
                <input type="checkbox" name="interest" id="interest-cook" value="cook">
                <label for="rate-4">Koken</label>
            </div>
            <div>
                <label for="country">Land</label><br>
                <select name=country id="country" size="2">
                    <option value="BE">België</option>
                    <option value="DE">Duitsland</option>
                    <option value="FR">Frankrijk</option>
                    <option value="LU">Luxemburg</option>
                    <option value="NL">Nederland</option>
                    <option value="UK">Verenigd Koninkrijk</option>
                </select>
            </div>
        </fieldset>
        <div class="command-bar">
            <button type="submit" name="uc" value="send">Versturen</button>
        </div>
    </form>
</body>
</html>

Resultaat:

2020-10-28 10:29:35